<template>
  <div class="yx-wrap">
    <div class="top">
      <NstdSlider
          v-model="scale"
          :min="10"
          :max="200"
          :step="5"
          :format-tooltip="(val) => val + '%'"
          :marks="marks"
          class="slider"
          @change="sliderChange"
      />
      <NstdButton @click="dialogVisible = true">页面说明</NstdButton>
    </div>
    <div class="content">
      <div
          class="tree"
          :class="['tab-collapse', openLeft ? '' : 'tab-collapsed']"
          :style="{ width: openLeft ? '0px' : '300px' }"
      >
        <div class="tree-wrap">
          <NstdInput
              v-model="filterText"
              :prefix-icon="Search"
              placeholder="请输入"
              clearable
              class="search"
              v-show="!openLeft"
          ></NstdInput>
          <NstdScrollbar>
            <NstdTree
                ref="treeRef"
                :data="menuData"
                :props="defaultProps"
                default-expand-all
                highlight-current
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                style="height: 100%; background: none"
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <img
                      v-if="data.parentId !== data.appId"
                      :src="iconType(node, data)"
                      alt=""
                      srcset=""
                      :style="{ width: data.dirPage ? '17px' : '14px' }"
                  />
                  <span :title="data.name" :class="{ parentSzie: data.parentId === data.appId }" class="tree-name">
                    {{ data.name }}
                  </span>
                </div>
              </template>
            </NstdTree>
          </NstdScrollbar>
        </div>
        <div class="tabs-colspan" @click="colspanChange">
          <div class="tabs-colspan-top" />
          <div class="tabs-colspan-bottom" />
        </div>
      </div>
      <div class="yx-route" id="canvas" :style="{overflow: isHidden() ? 'hidden' : 'auto'}" :key="key">
        <router-view :style="boxStyle()"/>
      </div>
    </div>
  </div>
  <NstdDialog class="msg-dialog" v-model="dialogVisible" title="页面说明" width="300" draggable :modal="false" :before-close="handleClose">
    <span v-html="content.replace(/\n/g, '<br>')"></span>
  </NstdDialog>
</template>

<script setup>
import { menu } from '../../public/menu';
import file from '@/assets/file.png';
import page from '@/assets/page.png';
const router = useRouter();
const dialogVisible = ref(false)
const content = ref('')
let menuData = ref([])
let openLeft = ref(false);
let scale = ref(100);
let key = ref(Date.now());
const marks = {
  100: {
    style: {
      color: '#1989FA'
    }
  }
};
const treeRef = ref();
const filterText = ref('');
watch(filterText, (val) => {
  treeRef.value.filter(val);
});
const iconType = computed(() => {
  return (node, data) => {
    const { dirPage } = data;
    if (dirPage) {
      return file;
    } else {
      return page;
    }
  };
});
const defaultProps = {
  children: 'children',
  label: 'name'
};
function handleClose() {
  dialogVisible.value = false;
}
const handleNodeClick = (data) => {
  console.log(data, 'data');
  if (data.dirPage) return false;
  router.push(data.menuUrl);
  content.value = data.pageDesc
};
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
function setScale() {
  nextTick(() => {
    const w = document.querySelector("#canvas").offsetWidth
    const cw = document.querySelector("#canvas").clientWidth
    const sw = w - cw
    // let setW = window.innerWidth
    let setW = 1920
    if (setW > w) {
      // 6为滚动条宽度
      scale.value = Number((((w - sw - 6) / setW) * 100).toFixed(2));
    } else {
      scale.value = Number(((w / setW) * 100).toFixed(2));
    }
  })
}
function sliderChange(params) {
  key.value = Date.now()
}
function isHidden() {
  let curW = (window.innerWidth - 300);
  let totalW = 1920;
  return totalW * (scale.value / 100) < curW
}
function boxStyle() {
  let ppwidth = 1920 + 'px';
  let ppHeight = 1080 + 'px';
  return {
    width: ppwidth,
    height: ppHeight,
    transform: `scale(${scale.value / 100}, ${scale.value / 100})`,
    'transform-origin': '0 0',
    transition: 'all 0.4s'
  }
}
function colspanChange() {
  openLeft.value = !openLeft.value;
  setScale()
}
function getMenuData(params) {
  const filterTreeArray = (tree, num) => {
    return tree
        .filter((item) => {
          return item.display === 0;
        })
        .map((item) => {
          item = Object.assign({}, item);
          if (item.children) {
            item.children = filterTreeArray(item.children, num);
          }
          return item;
        });
  };
  menuData.value = filterTreeArray(menu)
}
onMounted(() => {
  getMenuData()
  setScale()
})
</script>
<style>
.el-dialog.msg-dialog{
  padding: 0;
  margin-left: 0;
  margin-top: 20px;
  transform: translate(2px, -260px);
}
</style>
<style lang="scss" scoped>
:deep(.el-button:focus), :deep(.el-button:hover) {
  background: #fff;
  border-color: rgb(220, 223, 230);
}
:deep(.el-button) {
  color: #333;
  border-color: rgb(220, 223, 230);
  background: #fff;
}
.tree-name{
  color: #333;
}
:deep(.el-tree-node__content:hover){
  background: #f5f7fa;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
  background: #e6e6e6;
}
.tree-wrap {
  height: 100%;
  padding: 0px;
  display: flex;
  flex-direction: column;
  .search {
    width: 96%;
    margin-bottom: 8px;
    margin-left: 2%;
    margin-top: 8px;
  }
}
.tree-name {
  position: relative;
  font-size: 15px;
  margin-left: 5px;
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
:deep(.el-tree-node__content) {
  .custom-tree-node {
    width: 80%;
    position: relative;
    display: flex;
    align-items: center;
  }
  .parentSzie {
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
  }
}

.yx-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .top {
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #CBD5E0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    .slider {
      width: 200px;
      margin-right: 10px;
    }
  }
  .content {
    display: flex;
    height: calc(100% - 40px);
    .tree {
      background: #f2f2f2;
      width: 300px;
      border-right: 1px solid #ccc;
      position: relative;

      .el-scrollbar {
        flex: 1;

        :deep(.el-scrollbar__view) {
          height: 100%;
        }
      }
    }

    .yx-route {
      flex: 1;
      position: relative;
    }
  }
}
.tab-collapsed {
  .tabs-colspan {
    transform: rotate(180deg);
  }
}
.tabs-colspan {
  position: absolute;
  width: 10px;
  height: 72px;
  top: 50%;
  right: -10px;
  margin-top: -40px;
  z-index: 999;
  cursor: pointer;

  .tabs-colspan-bottom {
    top: 34px;
  }

  .tabs-colspan-top,
  .tabs-colspan-bottom {
    position: absolute;
    background-color: #409eff;
    width: 4px;
    border-radius: 2px;
    height: 38px;
    left: 3px;
  }

  &:hover {
    .tabs-colspan-top {
      transform: rotate(-12deg) scale(1.15) translateY(-2px);
    }

    .tabs-colspan-bottom {
      transform: rotate(12deg) scale(1.15) translateY(2px);
    }
  }
}
</style>
